{template "header.html", "/"}
<script type="text/javascript" src="{HOME_THEME_PATH}shop/js/mzp-packed.js"></script>
<link rel="stylesheet" href="{HOME_THEME_PATH}shop/css/zzsc.css">
<link rel="stylesheet" href="{HOME_THEME_PATH}shop/css/magiczoomplus.css">
<script language="javascript">
    // 这是加入收藏夹的ajax请求，我就随意写了一下提示信息，至于美化啊什么交给你们了
    function dr_favorite() {
        $.get("/index.php?s={MOD_DIR}&c=api&m=favorite&id={$id}", function(data){
            if (data == 1) {
                dr_tips("没有登录，不能收藏");
            } else if (data == 2) {
                dr_tips("商品不存在，无法收藏");
            } else if (data == 3) {
                dr_tips("更新收藏成功", 3, 1);
            } else if (data == 4) {
                dr_tips("收藏成功", 3, 1);
            }
        });
    }


    $(window).ready(
            function () {
                var show =  $("#showArea");

                var left = 0;

                var picBox = $(".smallPic");

                var bigPic = $("#main_img");

                var img = $("#showArea img");

                var speed = img.width()*4;

                show.css("width",((img.length+1)*img.width()).toString()+"px");
                img.hover(
                        function () {
                            bigPic.attr("src",this.src);
                            $(".MagicZoomBigImageCont img").attr("src",this.src);
                            $(".MagicThumb-container img").attr("href",this.src);
                            $("#zoom1").attr("href",this.src);
                        }
                );



                $("#gobottom").click(
                        function () {
                            if (parseInt(show.css("left"))-speed <= (-(show.width() - picBox.width()+speed))) {
                                return 0;
                            }
                            show.animate({
                                "left" : left -= speed
                            },200)
                        }
                );
                $("#gotop").click(
                        function () {
                            if (show.css("left") >= "0px") {
                                return 0;
                            }
                            show.animate({
                                "left": left += speed
                            }, 200)

                        }
                );

            }

    );

    {php $sku_sn = $sku_price = $sku_quantity = array();}
    {loop $order_specification.value $iid $t}
    {php $sku_price[$iid] = $t['price'];}
    {php $sku_sn[$iid] = $t['sn'];}
    {php $sku_quantity[$iid] = $t['quantity'];}
    {/loop}
    var sku_sn = {json_encode($sku_sn)};
    var sku_price = {json_encode($sku_price)};
    var sku_quantity = {json_encode($sku_quantity)};

    // 商品数量加减选择
    function dr_sku_item_num(op) {
        var num = parseInt($("#dr_sku_num").val());
        var _quantity = parseInt($("#dr_sku_quantity").html());
        if (isNaN(num) || num <= 1) num = 1;
        if (op) {
            // 加操作
            num++;
            if (num >= _quantity) num = _quantity;
        } else {
            // 减操作
            num--;
            if (isNaN(num) || num <= 1) num = 1;
        }
        $("#dr_sku_num").val(num);
    }
    // 购买商品
    function dr_buy() {
        {if !$member}
        dr_login();
        return;
        {/if}
        var order = "{dr_url('order/home/index', array('mid'=>MOD_DIR, 'cid'=>$id))}";
        {if $order_specification}
        var i = 0;
        var sku = new Array();
        $(".dr_sku_value").each(function(){
            var id = $(this).val();
            if (id == "") {
                // 请勾选您要的商品信息
                dr_tips("请勾选您要的商品信息", 3);
                return;
            }
            sku[i] = id;
            i++;
        });
        order+= "&spec="+sku.join("_"); // 组合串联属性
        {/if}
        // 判断库存
        var _quantity = parseInt($("#dr_sku_quantity").html());
        if (isNaN(_quantity) || _quantity <= 0) {
            dr_tips("库存不足无法购买", 3);
            return;
        }
        var num = parseInt($("#dr_sku_num").val());
        order+= "&num="+num;
        location.href=order;
    }
    // 购物车
    var is_cart = true;
    function dr_cart() {
        if (!is_cart) {
            //alert('刷新后再试');
            //return;
        }
        var cart = "{dr_url('order/cart/add', array('mid'=>MOD_DIR, 'cid'=>$id))}";
        {if $order_specification}
        var i = 0;
        var sku = new Array();
        $(".dr_sku_value").each(function(){
            var id = $(this).val();
            if (id == "") {
                // 请勾选您要的商品信息
                dr_tips("请勾选您要的商品信息", 3);
                return;
            }
            sku[i] = id;
            i++;
        });
        cart+= "&spec="+sku.join("_");
        {/if}
        // 判断库存
        var _quantity = parseInt($("#dr_sku_quantity").html());
        if (isNaN(_quantity) || _quantity <= 0) {
            dr_tips("库存不足无法购买", 3);
            return;
        }
        var num = parseInt($("#dr_sku_num").val());
        cart+= "&num="+num;
        is_cart = false;
        $.ajax({type: "GET", url: cart, dataType:"jsonp",
            success: function (data) {
                if (data.status) {
                    dr_tips('添加成功，购车中共'+data.code+'件商品', 3, 1);
                } else {
                    dr_tips(data.code);
                    is_cart = true;
                }
            }
        });
    }
    // 按规则更新商品价格
    function dr_sku_update_item() {
        var i = 0;
        var sku = new Array();
        // 遍历属性
        $(".dr_sku_value").each(function(){
            var id = $(this).val();
            if (id == "") return;
            sku[i] = id;
            i++;
        });
        var oname = sku.join("_"); // 组合串联属性
        // 当全部勾选之后才更新商品价格与库存
        var _sn = sku_sn[oname];
        var _price = sku_price[oname];
        var _quantity = sku_quantity[oname];
        $("#dr_sku_price").html(price_float(_price));
        $("#dr_sku_sn").html(_sn);
        if (_quantity) {
            $("#dr_sku_quantity").html(_quantity);
        } else {
            $("#dr_sku_quantity").html("<font color=red>库存不足</font>");
        }
    }
    // 按规则选择商品
    function dr_sku_select_item(_this, oname, val) {
        $(".dr_sku_"+oname+" > span").attr("class", "txt");
        $(_this).attr("class", "curr");
        $("#dr_sku_"+oname).val(val);
        dr_sku_update_item();
    }
    function price_float(value){  //保留两位小数点
        if (!value) value = 0;
        value = Math.round(parseFloat(value) * 100) / 100;
        if (value.toString().indexOf(".") < 0) {
            value = value.toString() + ".00";
        }
        return value;
    }
    // 设置商品的默认规则
    $(function(){
        $(".dr_sku_value").each(function(){
            var id = $(this).val();
            var oname = $(this).attr("oname");
            $(".dr_sku_"+oname+" > span").attr("class", "txt");
            if (id) {
                $("#dr_sku_value_"+id).attr("class", "curr");
            } else {
                var _first = $(".dr_sku_"+oname+" span").first();
                var _iid = _first.attr("ovalue");
                _first.attr("class", "curr");
                $("#dr_sku_"+oname).val(_iid);
            }
            dr_sku_update_item();
        });
    });



</script>
<style>

    .carbox span{
        cursor: pointer;
        float:left;
        min-width:40px;
        padding:0px 8px;
        text-align:center;
        line-height:22px;
        position:relative;
        background: #fff;
        margin-right:8px;
    }
    .sku-name {
        width:62px;
        padding-right:10px !important;
        padding-bottom:5px !important;
        text-align:right !important;
    }
    .carbox .txt{
        padding: 4px 6px;
        border: 1px solid #ccc;
        color:#646464;
        background:#fff;
        margin-bottom:5px;
        white-space:nowrap;
    }
    .carbox span.txt:Hover{
        border: 2px solid #e4393c;
        padding: 3px 5px;
    }
    .carbox span.curr{
        padding: 3px 5px;
        border: 2px solid #e4393c;
    }
    .carbox span.curr b {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        overflow: hidden;
    }
    .attributes{
        clear: both;
        padding: 5px 0;
        overflow: hidden;
    }
</style>
<div class="page-container">
    <div class="page-content-wrapper">
        {template "header.html"}
        <div class="page-content">
            <div class="container">

                <ul class="page-breadcrumb breadcrumb">
                    <li>
                        <a href="{SITE_URL}">首页</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <a href="{MODULE_URL}">{MODULE_NAME}</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    {dr_catpos($catid, '', true, '<li><a href="{url}">{name}</a><i class="fa fa-circle"></i></li>')}
                    <li>
                        <span>{$title}</span>
                    </li>
                </ul>

                <div class="page-content-inner">
                    <div class="search-page search-content-2">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="portlet light">
                                    <div class="row">
                                        <div class="col-md-4">
                                            {if IS_PC}
                                            <div class="left-pro">
                                                <div class="t2">
                                                    <a href="{dr_get_file($thumb[0])}" id="zoom1" class="MagicZoom"><img width="320" height="300" src="{dr_thumb($thumb[0],'320','320')}" id="main_img" class="main_img" width="100%"/></a>
                                                </div>
                                                <div class="t1">
                                                    <img src="{HOME_THEME_PATH}shop/images/left.gif" id="gotop" />
                                                    <div class="smallPic">
                                                        <div id="showArea">
                                                            {loop $thumb $pic}
                                                            <a href="{dr_get_file($pic)}" rel="zoom1" rev="{dr_get_file($pic)}">
                                                                <img src="{dr_get_file($pic)}" width="320" height="300">
                                                            </a>
                                                            {/loop}
                                                        </div>
                                                    </div>
                                                    <img src="{HOME_THEME_PATH}shop/images/right.gif" onclick="" id="gobottom"/>
                                                </div>
                                            </div>
                                            {else}

                                            {/if}


                                        </div>
                                        <div class="col-md-8" id="product">
                                            <div class="portlet light" style="padding-top:0px;margin-bottom:0;padding-left: 0px;">
                                                <div class="portlet-title">
                                                    <div class="caption">
                                                        <span class="caption-subject font-dark bold uppercase">{$title}</span>
                                                    </div>
                                                </div>
                                                <div class="search-post-foot" style="padding-top:0px;text-align:left;padding-bottom: 10px">
                                                    <div class="search-post-meta">
                                                        <i class="icon-user font-blue"></i>
                                                        <a href="javascript:;">{$author}</a>
                                                    </div>
                                                    <div class="search-post-meta">
                                                        <i class="icon-calendar font-blue"></i>
                                                        <a href="javascript:;">{$updatetime}</a>
                                                    </div>
                                                    <div class="search-post-meta">
                                                        <i class="icon-fire font-blue"></i>
                                                        <a href="javascript:;">{dr_show_hits($id)}次</a>
                                                    </div>
                                                    <div class="search-post-meta">
                                                        <i class="icon-bubble font-blue"></i>
                                                        <a href="javascript:;">{$comments}</a>
                                                    </div>
                                                    <div class="search-post-meta">
                                                        <i class="icon-flag font-blue"></i>
                                                        <a href="javascript:dr_favorite();">加入收藏</a>
                                                    </div>
                                                </div>


                                                <div class="product-price-group">
                                                    <span class="price" style="font-size: 18px;font-weight: bold;color: #ff3366;">￥<b id="dr_sku_price">{$order_price}</b>元</span>
                                                    {if !$order_shipping}
                                                    <span class="label label-warning">包邮</span>
                                                    {/if}
                                                </div>
                                                <div class="info-orther">
                                                    <p style="margin: 10px 0">商品编码：<span id="dr_sku_sn">{$order_sn}</span></p>
                                                    <p style="margin: 10px 0">上架时间：{$updatetime}</p>
                                                    <p style="margin: 10px 0">累计销量：已卖出 <b style="color:blue">{$order_volume}</b> 件</p>
                                                </div>
                                                <div class="product-desc">
                                                    <p style="margin: 10px 0">商品所在地：{dr_linkagepos('address', $order_city, ' » ')}</p>

                                                </div>
                                                <div class="form-option">
                                                    {if $order_specification}
                                                    {php $sku = dr_get_spec_data($catid, $order_specification);}
                                                    {loop $sku $oname $s}
                                                    {if isset($order_specification['option'][$oname]) && $order_specification['option'][$oname]}
                                                    <div class="attributes">
                                                        <div class="attribute-label">{$s['name']}：</div>
                                                        <div class="attribute-list carbox">
                                                            <input class="dr_sku_value" id="dr_sku_{$oname}" oname="{$oname}" type="hidden" value="" />
                                                            <div class="dr_sku_{$oname} sku-value">
                                                                {loop $order_specification['option'][$oname] $val}
                                                                <span {if $sku[$oname]['type']=='color'} style="background-color:{php echo preg_match('/[a-z]+/', $val) ? $val : '#'.$val;}"{/if} id="dr_sku_value_{$val}" ovalue="{$val}" class="txt" onclick="dr_sku_select_item(this, '{$oname}', '{$val}')" title="{$s['value'][$val]}"><b></b>{if $sku[$oname]['type']=='color'}&nbsp;{else}{$s['value'][$val]}{/if}</span>
                                                                {/loop}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {/if}
                                                    {/loop}
                                                    {/if}

                                                    <div class="attributes">
                                                        <div class="attribute-label">购买数量：</div>
                                                        <div class="attribute-list product-qty" style="width: 200px">
                                                            <label>
                                                            <div class="input-group bootstrap-touchspin">
                                                                    <span class="input-group-btn">
                                                                        <button class="btn btn-default bootstrap-touchspin-down" onclick="dr_sku_item_num(0)" type="button">-</button>
                                                                    </span><span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
                                                                <input id="dr_sku_num" type="text" value="1" name="num" class="form-control" style="display: block;">
                                                                <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
                                                                <span class="input-group-btn">
                                                                        <button class="btn btn-default bootstrap-touchspin-up" onclick="dr_sku_item_num(1)" type="button">+</button>
                                                                    </span>
                                                            </div>
                                                                </label>
                                                        </div>
                                                    </div>
                                                    <div class="info-orther">
                                                        <div>库存数量：<b id="dr_sku_quantity">{$order_quantity}</b></div>
                                                    </div>
                                                </div>
                                                <div class="form-action" style="margin-top: 20px">
                                                    <div class="button-group">
                                                        <a class="btn-add-cart addcar" ii="{dr_get_file($thumb[0])}" href="javascript:;" onclick="dr_cart()">加入购物车</a>
                                                        <a class="btn green btn-sm" style="line-height:1.7;font-size: 14px;" href="javascript:;" onclick="dr_buy()"><i class="fa fa-rmb"></i> 立即购买</a>
                                                    </div>
                                                </div>



                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="row">
                            <div class="col-md-12">
                                <div class="portlet light">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-dark bold uppercase">商品详情</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body" style="height: auto;">
                                        {$content}
                                    </div>
                                </div>
                                <div class="portlet light">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-dark bold uppercase">商品属性</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body" style="height: auto;">
                                        {php $sx = dr_mall_property_value($catid, $shangpinshuxing);}
                                        <table cellpadding="0" cellspacing="1" width="100%" border="0" class="table table-bordered">
                                            <tbody>
                                            {loop $sx $name $value}
                                            <tr>
                                                <th class="tdTitle" colspan="2">{$name}</th>
                                            </tr>
                                            {loop $value $n $v}
                                            <tr>
                                                <td width="200" class="tdTitle">{$n}</td>
                                                <td>
                                                    {if is_array($v)}
                                                    {implode(' ', $v)}
                                                    {else}
                                                    {$v}
                                                    {/if}
                                                </td>
                                            </tr>
                                            {/loop}
                                            {/loop}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="portlet light">
                                    <div class="portlet-title">
                                        <div class="caption">
                                            <span class="caption-subject font-dark bold uppercase">买家评论</span>
                                        </div>
                                    </div>
                                    <div class="portlet-body" style="height: auto;">
                                        {dr_module_comment(MOD_DIR, $id)}
                                    </div>



                                </div>

                            </div>
                        </div>


                    </div>


                </div>
            </div>
        </div>
    </div>
</div>


{template "footer.html", "/"}